<template>
  <div class="access">
    <div class="accessModule centerFlex column" v-if="step == 10">
      <Icon type="md-checkmark-circle" color="rgb(32,80,171)" size="100"/>
      <div class="titleCon centerFlex">恭喜,你的店铺创建成功啦！</div>
      <div class="btnBlock centerFlex">
        <Button v-if="step == 10" class="buttonWhite centerFlex">跳过指引开启使用</Button>
        <Button v-if="step == 10" class="button centerFlex">查看后台指引</Button>
      </div>
    </div>
    <div class="accessModule" v-else>
      <div class="accessTtile">欢迎使用半城云，授权小程序就可以啦~</div>
      <div class="process">
        <div class="processName" :style="step === 1||step === 2||step === 3||step === 4?'font-weight:bold':''">1.授权认证服务号</div>
        <div class="processLine">————</div>
        <div class="processName" :style="step === 5||step === 6||step === 7||step === 8?'font-weight:bold':''">2.授权认证小程序</div>
        <div class="processLine">————</div>
        <div class="processName" :style="step === 9?'font-weight:bold':''">3.申请微信支付</div>
        <div class="processLine">————</div>
        <div class="processName" :style="step === 10?'font-weight:bold':''">4.接入成功</div>
      </div>
      <!-- 服务号 -->
      <div class="contentBlock centerFlex column" v-if="step == 1||step == 2||step == 3||step == 4">
        <div class="content centerFlex">
          <div class="conRow centerFlex column">
            <img
              v-if="step == 1"
              src="https://file.open.banchengyun.com/2019/05/07/155719256495672.png"
            >
            <div v-if="step == 2" class="mohu centerFlex column">
              <Icon type="md-close-circle" color="rgb(32,80,171)" size="80"/>
              <div class="moTip">扫码失败</div>
              <div class="moTip">请重新扫码</div>
              <a class="retry">重新扫码</a>
            </div>
            <div v-if="step == 3" class="mohu centerFlex column">
              <Icon type="md-checkmark-circle" color="rgb(32,80,171)" size="80"/>
              <div class="moTip">扫码成功</div>
              <div class="moTip">请在手机上授权</div>
              <a class="retry">重新扫码</a>
            </div>
            <div v-if="step == 4" class="mohu centerFlex column">
              <Icon type="md-checkmark-circle" color="rgb(32,80,171)" size="80"/>
              <div class="moTip">授权成功</div>
              <a class="retry">重新扫码</a>
            </div>
          </div>
          <div class="conRow">
            <div class="warnTitle">注意</div>
            <div class="warnCon">
              1.服务号必须已认证
              <br>2.由服务号管理员扫码授权
              <br>3.选择授权服务号
              <br>4.服务号不能授权其它第三方平台
            </div>
          </div>
        </div>
        <div class="tips">Tips:使用公众平台绑定的管理员个人微信号扫码</div>
        <Button v-if="step == 4" class="button centerFlex">下一步</Button>
      </div>
      <!-- 小程序授权 -->
      <div class="contentBlock centerFlex column" v-if="step == 5||step == 6||step == 7||step == 8">
        <div class="content centerFlex">
          <div class="conRow centerFlex column">
            <img
              v-if="step == 5"
              src="https://file.open.banchengyun.com/2019/05/07/155719256495672.png"
            >
            <div v-if="step == 6" class="mohu centerFlex column">
              <Icon type="md-close-circle" color="rgb(32,80,171)" size="80"/>
              <div class="moTip">扫码失败</div>
              <div class="moTip">请重新扫码</div>
              <a class="retry">重新扫码</a>
            </div>
            <div v-if="step == 7" class="mohu centerFlex column">
              <Icon type="md-checkmark-circle" color="rgb(32,80,171)" size="80"/>
              <div class="moTip">扫码成功</div>
              <div class="moTip">请在手机上授权</div>
              <a class="retry">重新扫码</a>
            </div>
            <div v-if="step == 8" class="mohu centerFlex column">
              <Icon type="md-checkmark-circle" color="rgb(32,80,171)" size="80"/>
              <div class="moTip">授权成功</div>
              <a class="retry">重新扫码</a>
            </div>
          </div>
          <div class="conRow">
            <div class="warnTitle">注意</div>
            <div class="warnCon">
              1.小程序必须已认证
              <br>2.由小程序管理员扫码授权
              <br>3.选择授权小程序
              <br>4.小程序主体必须与公众号、微信支付一致
              <br>5.小程序不能授权其它第三方平台
            </div>
          </div>
        </div>
        <div class="tips">Tips:使用公众平台绑定的管理员个人微信号扫码</div>
        <Button v-if="step == 8" class="button centerFlex">下一步</Button>
      </div>
      <!-- 申请微信支付 -->
      <div class="contentBlock centerFlex column" v-if="step == 9">
        <div class="content centerFlex">
          <div class="conRow centerFlex column">
            <Form
              v-if="step==9"
              ref="formValidate"
              :model="formValidate"
              :rules="ruleValidate"
              :label-width="80"
            >
              <FormItem label="微信支付商户号" prop="mch_id" label-width="150">
                <Input v-model="formValidate.mch_id" placeholder="请输入微信支付商户号" style="width:400px"></Input>
              </FormItem>
              <FormItem label="API密钥" prop="secret_key" label-width="150">
                <Input v-model="formValidate.secret_key" placeholder="请输入API密钥"></Input>
              </FormItem>
              <FormItem label="安全证书 KEY" prop="key" label-width="150">
                <div class="input-wrapper">
                  <Input
                    readonly
                    v-model="formValidate.key"
                    placeholder="点击开始上传证书"
                    style="cursor: pointer;"
                  ></Input>
                  <input
                    class="upload-input"
                    name="key"
                    type="file"
                    accept=".pem"
                    @change="handleFileChange"
                  >
                </div>
              </FormItem>
              <FormItem label="安全证书 CERT" prop="cert" label-width="150">
                <div class="input-wrapper">
                  <Input
                    readonly
                    v-model="formValidate.cert"
                    placeholder="点击开始上传证书"
                    style="cursor: pointer;"
                  ></Input>
                  <input
                    class="upload-input"
                    name="cert"
                    type="file"
                    accept=".pem"
                    @change="handleFileChange"
                  >
                </div>
              </FormItem>
              <FormItem label="企业付款到零钱" prop="mch_id" label-width="150">
                <div class="hasIt">已开通</div>
              </FormItem>
              <FormItem label="企业付款到银行卡" prop="mch_id" label-width="150">
                <div class="hasNot">未开通</div>
              </FormItem>
              <!-- <FormItem style="padding:30px 0 0 100px;">
                <Button type="primary" @click="handleSubmit('formValidate')">保存并进行下一步</Button>
                <Button type="primary" @click="loginOut">退出登陆</Button>
              </FormItem>-->
            </Form>
          </div>
        </div>
        <div class="centerFlex">
          <div class="tips">小程序需要审核通过才能使用，提交至微信团队审核，约1-3个工作日</div>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
          <a class="blueCon">了解如何获取以上信息</a>
        </div>
        <Button v-if="step == 9" class="button centerFlex" @click="finishConfig">提交版本审核</Button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "access",
  data() {
    return {
      // step
      // 1--服务号准备授权  2--服务号授权超时或失败  3--服务号扫码成功  4--服务号授权成功
      // 5--小程序准备授权  6--小程序授权超时或失败  7--小程序扫码成功  8--小程序授权成功
      // 9--申请微信支付    10--接入成功
      step: 1,
      formValidate: {
        mch_id: "",
        type: 2,
        secret_key: "",
        key: "",
        cert: ""
      },
      formData: new FormData(),
      ruleValidate: {
        mch_id: [
          {
            required: true,
            message: "微信支付商户号不得为空",
            trigger: "blur"
          }
        ],
        secret_key: [
          {
            required: true,
            message: "API密钥不得为空",
            trigger: "blur"
          }
        ],
        type: [
          { required: true, message: "请选择是否是特约商户", trigger: "change" }
        ],
        key: [
          {
            required: true,
            message: "安全证书 KEY不得为空",
            trigger: "blur"
          }
        ],
        cert: [
          {
            required: true,
            message: "安全证书 CERT不得为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleFileChange(event) {
      //   this.spinShow = true;
      let formData = this.formData;
      formData.append([event.target.name], event.target.files[0]);
      this.formValidate[event.target.name] = event.target.name + ".pem";
    }
  }
};
</script>
<style lang="less" scoped>
.access {
  height: 94vh;
}
.input-wrapper {
  position: relative;
}
.input-wrapper .upload-input {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
}
.centerFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.column {
  flex-direction: column;
}
.hasIt {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(45, 45, 45, 1);
  line-height: 0px;
  height: 2rem;
  display: flex;
  align-items: center;
}
.hasNot {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(246, 64, 49, 1);
  line-height: 0px;
  height: 2rem;
  display: flex;
  align-items: center;
}
.blueCon {
  font-size: 12px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #1e499c;
  line-height: 0px;
}
.button {
  height: 35px;
  border-radius: 5px;
  background: #1e499c;
  color: white;
  padding: 0 50px;
  margin-right: 50px;
}
.buttonWhite{
  height: 35px;
  border-radius: 5px;
  background: rgba(255,255,255,1);
  color: rgba(30,73,156,1);
  padding: 0 50px;
  margin-right: 50px;
  border:1px solid rgba(30,73,156,1);
}
.accessModule {
  background: white;
  width: 96%;
  min-height: 84vh;
  margin: 2%;
  .btnBlock{
      height: 8vh;
  }
  .titleCon {
    font-size: 26px;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 42px;
    height: 10vh;
  }
  .process {
    width: 100%;
    height: 4rem;
    display: flex;
    justify-content: center;
    .processName {
      font-size: 14px;
    }
    .processLine {
      padding: 0 20px;
    }
  }
  .accessTtile {
    width: 100%;
    height: 18vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 42px;
    margin-top: 2%;
  }

  .contentBlock {
    width: 100%;
    .content {
      min-width: 50%;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(238, 238, 238, 1);
      border-radius: 10px;
      .conRow {
        flex: 1;
        padding: 41px;
        img {
          width: 240px;
          height: 240px;
        }
        .mohu {
          width: 240px;
          height: 240px;
          .moTip {
            font-size: 16px;
            font-family: PingFangSC-Light;
            font-weight: 300;
            color: rgba(45, 45, 45, 1);
            line-height: 24px;
          }
          .retry {
            font-size: 12px;
            font-family: PingFangSC-Light;
            font-weight: 300;
            color: #1e499c;
            line-height: 22px;
            margin-top: 31px;
            font-weight: bold;
          }
        }
        .warnTitle {
          font-size: 16px;
          font-family: PingFangSC-Light;
          font-weight: 300;
          color: rgba(102, 102, 102, 1);
          line-height: 36px;
        }
        .warnCon {
          font-size: 14px;
          font-family: PingFangSC-Light;
          font-weight: 300;
          color: rgba(102, 102, 102, 1);
          line-height: 36px;
        }
      }
    }
    .tips {
      font-size: 14px;
      font-family: PingFangSC-Light;
      font-weight: 300;
      color: rgba(153, 153, 153, 1);
      line-height: 22px;
      padding: 20px 0;
    }
  }
}
</style>


